<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>视诀-实时视频美颜SDK|实时视频美颜|实时人脸追踪|实时人脸建模</title>
	<!-- Bootstrap CSS -->
	<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> -->

	<!-- <link rel="stylesheet" type="text/css" href="http://siteimg.oss-cn-qingdao.aliyuncs.com/bootstrap.min.css"> -->
	<link rel="stylesheet" type="text/css" href="http://test.visualogies.com/css/bootstrap.min.css">
	<link href="http://siteimg.oss-cn-qingdao.aliyuncs.com/bootstrap-theme.css" rel="stylesheet">
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
			<![endif]-->
			<style type="text/css">
			.nav > li > a:focus, .nav > li > a:hover {
				text-decoration: none;
				background-color:#fff;
				/*color: #eee;*/
			}
			.nav > li > a{
				border-right-width: 1px;
				border-right-style: solid;
				padding-top: 0;
				padding-bottom:0;
			}
			a{
				color:#333;
			}
			.custom dl{
				float : left;
				/*margin: 0 auto;*/
				margin-right: 100px
			}
			.radiu{
				border: 1px solid #cccccc;
				-webkit-border-radius: 30px;
				-moz-border-radius: 30px;
				border-radius: 30px;
				padding:25px;
			}
			.bj{
				background-image:url("http://siteimg.oss-cn-qingdao.aliyuncs.com/login.jpg");
				height:967px;
				width:100%;
			}
			.tm{
				BACKGROUND-COLOR: transparent;
				BORDER-BOTTOM: #ffffff 1px solid;
				BORDER-LEFT: #ffffff 1px solid;
				BORDER-RIGHT: #ffffff 1px solid;
				BORDER-TOP: #ffffff 1px solid;
				COLOR: #ffffff;
				/*HEIGHT: 18px;*/
				border-color: #ffffff #ffffff #ffffff #ffffff; font-size: 9pt
			}
			img { max-width: 100%;}
			</style>
		</head>
		<body>

			<nav class="navbar  " role="navigation">
				<div class="container">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header" style="margin-top:20px">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span> 

						</button>
						<a class="" href="#" ><img src="http://siteimg.oss-cn-qingdao.aliyuncs.com/logo.png">


						</a>
						<h1 class="pull-right" style="margin-bottom:0;margin-top:40px">视诀</h1>

						<!-- style="float:none;padding-top:0;padding-bottom:0;line-height:0" -->
					</div>


					<!-- Collect the nav links, forms, and other content for toggling -->

					<ul class="nav navbar-nav navbar-right" style="margin-top: 75px;">
						<li class="active"><a href="/">首页</a></li>
						<li><a href="/plan.html">解决方案</a></li>
						<li><a href="/document.html">文档</a></li>
						<li><a href="/down.html">下载</a></li>
						<li><a href="/faq.html">FAQ</a></li>
						<li><a href="/about.html">关于我们</a></li>
						<li><a href="#" style="border-right:0">开发者平台</a></li>
					</ul>

					

				</div>
			</nav>


			<div class="container ">
				<div class="row"> 
					<div class="col-sm-2" style="background-color:#F4F4F4;min-height:500px">
						
						<h5><a href="/doc/0.html">1. 平台介绍</a></h5><h5><a href="/doc/1.html">2. SDK下载</a></h5><h5><a href="/doc/2.html">3. 开发者中心</a></h5><h5><a href="/doc/3.html">4. VisioninSDK集成</a></h5><h5><a href="/doc/4.html">5. 使用VisioninSDK</a></h5><h5><a href="/doc/5.html">6 短视频美颜方案</a></h5><h5><a href="/doc/6.html">7 视频直播美颜方案</a></h5>


					</div>

					<div class="col-sm-10" >
						<h4 class="text-center">5. 使用VisioninSDK</h4>
						<p style="text-indent:2em">
<h2>5.1 iOS</h2>
<p>保证包含SDK库文件</p>
<pre><code>#import "Visionin.h"
</code></pre>
<h3>5.1.1 初始化</h3>
<p>添加全局初始化方法，比如在AppDelegate中：</p>
<p><code>[Visionin initialize:@"xxx" appKey:@"yyy"];</code> </p>
<ul>
<li>其中xxx和yyy分别为在开发者平台中注册应用的appId和appKey</li>
</ul>
<h3>5.1.2 创建摄像头</h3>
<p><code>VSVideoCamera* videoCamera = [[VSVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset1280x720 position:AVCaptureDevicePositionFront view:self.view];</code></p>
<ul>
<li>SessionPreset：分辨率，如AVCaptureSessionPreset1280x720或者AVCaptureSessionPreset640x480</li>
<li>position：前摄像头或者后摄像头，AVCaptureDevicePositionFront或者AVCaptureDevicePositionBack</li>
<li>view：视频预览窗口</li>
</ul>
<h3>5.1.3 自定义美颜程度</h3>
<p>磨皮：</p>
<p><code>[videoCamera setSmoothLevel:level];</code></p>
<ul>
<li>level的值介于0-1.0之间，为0时不磨皮，默认值0.5</li>
</ul>
<p>美白：</p>
<p><code>[videoCamera setBrightenLevel:level];</code></p>
<ul>
<li>level的值介于0-1.0之间，为0时不美白，默认值0.5</li>
</ul>
<p>粉嫩：</p>
<p><code>[videoCamera setToningLevel:level];</code></p>
<ul>
<li>level的值介于0-1.0之间，为0时不粉嫩，默认值0.5</li>
</ul>
<h3>5.1.4 获取经过美颜后的视频流</h3>
<ul>
<li>VisioninSDk支持多种数据格式的获取，包括BGRA格式与YUV420格式；</li>
<li>每种格式支持输出byte数据或者CVPixelBufferRef数据；</li>
<li>要获取某种类型数据输出，需要实现对应的协议类型，并调用VSVideoCamera的set方法</li>
</ul>
<p>下面以获取BGRA格式的CVPixelBufferRef为例说明，并实现了一个封装为CMSampleBufferRef例子</p>
<h4>实现VSBGRAPixelBufferDelegate协议</h4>
<pre><code>@interface BGRAPixelBufferDelegate:NSObject&lt;VSBGRAPixelBufferDelegate&gt;
@end
@implementation BGRAPixelBufferDelegate
-(void)didBGRAPixelBuffer:(CVPixelBufferRef)pixelBuffer{
    // 封装CMSampleBufferRef的例子
    CVPixelBufferLockBaseAddress(pixelBuffer, 0);
    CVPixelBufferRetain(pixelBuffer);

    CMSampleBufferRef sampleBuffer = NULL;
    CMSampleTimingInfo timimgInfo = kCMTimingInfoInvalid;
    CMVideoFormatDescriptionRef videoInfo = NULL;
    CMVideoFormatDescriptionCreateForImageBuffer(
                                             NULL, pixelBuffer, &amp;videoInfo);
    CMSampleBufferCreateForImageBuffer(kCFAllocatorDefault,
                                   pixelBuffer,
                                   true,
                                   NULL,
                                   NULL,
                                   videoInfo,
                                   &amp;timimgInfo,
                                   &amp;sampleBuffer);
    CVImageBufferRef cvimgRef = CMSampleBufferGetImageBuffer(sampleBuffer);
    float _width = CVPixelBufferGetWidth(cvimgRef);
    float _height = CVPixelBufferGetHeight(cvimgRef);
    NSLog(@"width:%lf height:%lf", _width, _height);

    // 注意以下的释放代码
    CFRelease(sampleBuffer);
    CVPixelBufferRelease(pixelBuffer);
    CVPixelBufferUnlockBaseAddress(pixelBuffer, 0);
}
@end
</code></pre>
<h4>调用set方法</h4>
<p><code>[videoCamera setBgraPixelDelegate:[[BGRAPixelBufferDelegate alloc]init]];</code></p>
<h3>5.1.5 获取未处理的原始视频流</h3>
<p>如果需要从VSVideoCamera获取没有经过美颜的视频流，需要实现VSCameraSampleDelegate协议</p>
<p>VSCameraSampleDelegate:</p>
<ul>
<li>willOutputAudioSampleBuffer: 未经处理的音频流</li>
<li>willOutputVideoSampleBuffer: 未经处理的视频流</li>
</ul>
<p>调用VSVideoCamera的setSampleDelegate方法</p>
<h3>5.1.6 开启摄像头：</h3>
<p><code>[videoCamera startCameraCapture];</code></p>
<h3>5.1.7 使用自定义摄像头</h3>
<p>VisioninSDK封装了一个比较简单的摄像头，如果您有更复杂的需求需要自定义摄像头，VisioninSDK支持自定义摄像头。</p>
<h4>首先，新建VSVideoFrame对象</h4>
<p><code>VSVideoFrame* videoFrame = [[VSVideoFrame alloc] initWithPosition:AVCaptureDevicePositionFront asYUV:(BOOL)asYUV view:self.view];</code></p>
<ul>
<li>Position：表示为前摄像头或者后摄像头，AVCaptureDevicePositionFront或者AVCaptureDevicePositionBack</li>
<li>asYUV：视频流是否为YUV420数据，如果是YUV420为TRUE，如果是BGRA32为FALSE，<strong>注意如果不是YUV420数据，只接受BGRA32不接受RGBA32</strong></li>
<li>view：处理后视频预览窗口</li>
</ul>
<h4>然后调用startVideoFrame函数</h4>
<p><code>[videoFrame startVideoFrame];</code></p>
<h4>摄像头的captureOutput回调方法里获取到每一帧CMSampleBufferRef视频数据后，调用processVideoSampleBuffer处理视频帧</h4>
<p><code>[videoFrame processVideoSampleBuffer:sampleBuffer];</code></p>
<p>如果关闭摄像头，需要调用stopVideoFrame函数。</p>
<h4>注意：</h4>
<ul>
<li>startVideoFrame与stopVideoFrame必须成对调用，否则会破坏状态机导致processVideoSampleBuffer函数不可用；</li>
<li>前后摄像头切换时候，需要设置cameraPosition；</li>
<li>VSVideoFrame的其他接口用法和VSVideoCamera完全一样。</li>
</ul>
<h3>5.1.8 开启人脸追踪</h3>
<h4>实现VSFaceDelegate协议，如</h4>
<pre><code>@interface FaceDelegate : NSObject&lt;VSFaceDelegate&gt;
@end
@implementation FaceDelegate

-(void)faceWithPoints:(int [][2])points count:(int)count{
    NSLog(@"Face position:");
    for (int i=0; i&lt;count; i++) {
        NSLog(@"[%d:%d]", points[i][0], points[i][1]);
    }
}

@end
</code></pre>
<ul>
<li>目前VisioninSDK支持7个点的追踪，<strong>后续会陆续加入13点版本、32点版本、64点版本</strong></li>
<li>points是一个2维数组，存储眼睛坐标，count为点的数量</li>
<li>points：0/1:左眼；2/3:右眼；4/5:左脸框；6/7:右脸眶；8/9:额头；10/11：嘴唇下方(暂无意义); 12/13：两眼中间</li>
</ul>
<h4>调用VSVideoCamera的setFaceDelegate方法</h4>
<p><code>[videoCamera setFaceDelegate:[[FaceDelegate alloc]init]];</code></p>
<h4>开始人脸追踪</h4>
<p><code>[videoCamera startFaceTracking];</code></p>
<h2>5.2 Android</h2>
<p><em>敬请期待</em></p>
</p>
					</div>
				</div>
			</div>




			<footer class="custom container" style="margin: 0 auto">

				<img src="http://siteimg.oss-cn-qingdao.aliyuncs.com/weixin.png" class="pull-right">

				<dl>
					<dt><h4>联系我们</h3></dt>	
					<dd><a href="">技术支持</a></dd>
					<dd><a href="">业务咨询</a></dd>
					<dd><a href="">市场合作</a></dd>
					<dd><a href="">企业邮箱</a></dd>
				</dl>

				<dl >
					<dt><h4>开发者服务</h3></dt>	
					<dd><a href="">sdk下载</a></dd>
					<dd><a href="">文档中心</a></dd>
					<dd><a href="">开发者中心</a></dd>
				</dl>


				<dl >
					<dt><h4>关于我们</h3></dt>	
					<dd><a href="">公司介绍</a></dd>
					<dd><a href="">联系方式</a></dd>
					<dd><a href="">加入我们</a></dd>
					<dd><a href="">合作伙伴</a></dd>
					<dd><a href="">友情链接</a></dd>
				</dl>


				

			</footer>



















			<!-- jQuery -->
			<script src="http://siteimg.oss-cn-qingdao.aliyuncs.com/jquery.js"></script>
			<!-- Bootstrap JavaScript -->
			<script src="http://siteimg.oss-cn-qingdao.aliyuncs.com/bootstrap.min.js"></script>

			<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
			<script src="Hello World"></script>
		</body>
		</html>
